<template>
  <div class="container">
    <a-modal
      v-model:visible="visible"
      v-model:draggable="draggable"
      :title="title"
      @cancel="handleCancel"
      @before-ok="onBeforeOk"
    >
      <a-form
        ref="formRef"
        :label-col-props="{ span: 7 }"
        :wrapper-col-props="{ span: 17 }"
        :model="formData"
        class="form"
      >
        <a-spin dot :loading="loading">
          <a-form-item field="id" label="主键" v-show="false">
            <a-input v-model="formData.id" placeholder="请输入主键"/>
          </a-form-item>
          <a-form-item
            field="name"
            label="角色名称"
            :validate-trigger="['change', 'input']"
            :rules="[{ required: true, message: '请输入角色名称' }]"
          >
            <a-input v-model="formData.name" placeholder="请输入角色名称" />
          </a-form-item>

          <a-form-item field="description" label="角色描述">
            <a-textarea
              v-model="formData.description"
              placeholder="请输入角色描述"
            />
          </a-form-item>

        </a-spin>
      </a-form>
    </a-modal>
  </div>
</template>

<script lang="ts">
  import { defineComponent, ref, watch } from 'vue';
  import { FormInstance } from '@arco-design/web-vue/es/form';
  import useLoading from '@/hooks/loading';
  import { useI18n } from 'vue-i18n';
  import { addForm, detail, editForm } from '@/api/role';
  import { Message } from '@arco-design/web-vue';

  const formModel = () => {
    return {
      id: '',
      name: '',
      isSystem: '',
      description: ''
    };
  };

  export default defineComponent({
    setup(props, context) {
      const { t } = useI18n();
      const formData = ref(formModel());
      const formRef = ref<FormInstance>();
      const { setLoading } = useLoading();
      const operate = ref<number>();
      const isNew = ref<boolean>(false);
      const onBeforeOk = async (done: (arg: boolean) => void) => {
        const res = await formRef.value?.validate();
        if (!res) {
          try {
            setLoading(true);
            if (isNew.value) {
              await addForm(formData.value);
            } else {
              await editForm(formData.value);
            }
            Message.success(t('request.ok'));
            context.emit('ok');
          } catch (e) {
            return done(false);
          } finally {
            setLoading(false);
          }
        }
        return done(!res);
      };

      const reset = async () => {
        formData.value = formModel();
        await formRef.value?.resetFields();
      };
      return {
        formRef,
        reset,
        operate,
        formData,
        isNew,
        formModel,
        t,
        onBeforeOk,
      };
    },
    data() {
      return {
        visible: false,
        draggable: true,
        title: '',
        loading: false,
      };
    },
    methods: {
      addForm() {
        this.reset();
        this.visible = true;
        this.isNew = true;
        this.title = '新增菜单';
      },
      async editForm(id: string) {
        await this.reset();
        this.visible = true;
        this.isNew = false;
        this.title = '编辑菜单';
        const { data } = await detail(id);
        console.log(data)
        this.formData = data;
      },
      setLoading(loading: boolean) {
        this.loading = loading;
      },
      handleCancel() {
        this.reset();
        this.visible = false;
        this.isNew = true;
      },
    },
  });
</script>

<style scoped lang="less">
  .container {
    padding: 20px;
  }

  .form {
    width: 420px;
  }
</style>
